<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card>
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="80px">
                <el-form-item label="用户id" prop="userId">
                    <el-input v-model="state.queryParams.userId" placeholder="请输入用户id" clearable style="width: 120px;"/>
                </el-form-item>
                <el-form-item label="订单编号" prop="orderCode">
                    <el-input v-model="state.queryParams.orderCode" placeholder="请输入订单编号" clearable style="width: 200px;" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList"> 搜索 </el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)"> 重置 </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 查询结果 -->
        <el-card style="margin-top: 20px;">
            <el-table v-loading="state.dataListLoading" :data="state.rows">
                <el-table-column label="售后id" align="center" prop="id" />
                <el-table-column label="售后编码单号" align="center" prop="code" style="width: 120px;"/>
                <el-table-column label="用户id" align="center" prop="userId" />
                <el-table-column label="订单编号" align="center" prop="orderCode" />
                <el-table-column label="商品名" align="center" prop="productName" style="width: 200px;"/>
                <el-table-column label="规格名称" align="center" prop="specificationName" style="width: 100px;"/>
                <el-table-column label="退款状态(0失败，1等待商家同意，2等待银行受理，3退款中，4退款成功)" align="center" prop="status" />
                <el-table-column label="商家反馈时间" align="center" prop="agreeTime" >
                    <template #default = "scope">
                        <span>{{parseTime(scope.row.agreeTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="银行受理时间" align="center" prop="bankAccept" >
                    <template #default = "scope">
                        <span>{{parseTime(scope.row.bankAccept)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款到账时间" align="center" prop="accountTime" >
                    <template #default = "scope">
                        <span>{{parseTime(scope.row.accountTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款方式" align="center" prop="way" />
                <el-table-column label="申请时间" align="center" prop="applyTime" >
                    <template #default = "scope">
                        <span>{{parseTime(scope.row.applyTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="退款原因" align="center" prop="cause" />
                <el-table-column label="退款金额" align="center" prop="refundAmount" />
            </el-table>
        </el-card>
    </div>

</template>

<script setup name="aftersale" lang="ts">
    import { listAftersale } from '@/api/app/my/myorders/orders';
    import { reactive, getCurrentInstance, ComponentInternalInstance } from 'vue'
    import { IHooksOptions } from '@/hooks/interfaceservice';
    import { useCrud } from '@/hooks/indexservice';

    const { proxy } = getCurrentInstance() as ComponentInternalInstance

    //定义接口，后台请求的API，以及查询条件的表单对象
    const state : IHooksOptions = reactive({
        queryApi: listAftersale,
        //主键名称
        primaryKey: 'id',
        queryForm: {
            page: 1,
            size: 10
        },
        dateRange:[]
    })

    const { getDataList, selectionChangeHandle, sortChangeHandle, resetQuery } = useCrud(state)
</script>

<style>
</style>
